<template>
	<div class="bgd_regb">
		<div class="container" style="right: 120px; top: 160px;">
			<div class="header">
				<div class="left f_gray h_lf">
					忘记密码！
				</div>
				<div class="left f_red">
					<router-link to="login">
        			现在登录 &gt;
        			</router-link>
				</div>
			</div>
			<div>
				<div class="f_red f_weight txt_center" style="margin-top: 25px">
					找回密码
				</div>

				<div class="b_row">
					<span>
                    <img src="../static/images/user_icon.png" />
                </span>
					<input v-model="phone" placeholder="手机号" type="" id="" value="" name="" style="line-height: 1em;">
				</div>

				<div class="b_row">
					<span>
                    <img src="../static/images/pwd_icon.png" />
                </span>
					<input v-model="newPass" placeholder="请重新设置密码" type="" id="" value="" name="" style="line-height: 1em;">
				</div>

				<div class="simCode">
					<div class="b_row_code">
						<span>
                        <img src="../static/images/code_icon.png"/>
                    </span>
						<input v-model="code" type="text" placeholder="短信验证码" style="line-height: 1em;">
					</div>
					<div class="btn_code">
						<input id="btn" type="button" @click="getCode" value="获取验证码">
					</div>
				</div>
				<div class="b_row txt_center" style="border: 0;">
					<button @click="retrieveClick" style="margin-top: 0;">提交</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				newPass: 　 ''
			}
		},
		methods: {
			retrieveClick: function() {
				var self = this
				this.$api.post('/front/base/forgetPass', {
					phone: this.phone,
					code: this.code,
					newPass: 　this.newPass,
				}, r => {
//					console.log('找回密码返回r', r)
//					if(r == '重置成功') {
//						Toast(r)
//						self.$router.back(-1)
//					}
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
					self.$router.replace({
						path: 'login'
					})
				})
			},
			getCode: function() {
				var self = this
				this.$api.get('/front/base/smscode', { //接口
					phone: this.phone, //指向手机号
				}, r => {
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
					var countdown = 60; //定义一个变量为60
					function sendemail() { //开启函数
						var obj = $("#btn"); //获取到#btn并存到变量obj中
						settime(obj); //传入实参
					}

					function settime(obj) { //发送验证码倒计时
						if(countdown == 0) { //如果60==0的时候
							obj.attr('disabled', false); //#btn按钮失效
							//obj.removeattr("disabled");
							obj.val("免费获取验证码"); //#btn的value值为“免费获取验证码”
							countdown = 60; //countdown恢复为60
							return; //返回
						} else { //否则
							obj.attr('disabled', true); //#btn按钮为真
							obj.val("重新发送(" + countdown + ")"); //#btn的值为重新发送（秒数）
							countdown--; //countdown--
						}
						setTimeout(function() { //开启单次定时器
							settime(obj) //调用函数
						}, 1000) //时间为1分钟
					}

					sendemail() //调用函数
				})
			}
		}
	}
</script>
<style>
	#btn {
		background: #732d1c;
		border: none;
		outline: none;
		padding: 10px 15px;
		color: #fff;
		borde-radius: 5px
	}
</style>